<template>
    <div  style="width: 100%; height: 100%;" >
    <div>
        <div class="right">
            <el-input class="search" placeholder="搜索本场标的" prefix-icon="el-icon-search" :disabled="able"></el-input>
            <div class="rightTop">
                <div class="textArea1">
                    <el-tabs>
                        <el-tab-pane class="button" label="出价信息">
                            <el-table :data="bidderData" height="200">
                                <el-table-column width="70" property="zt" label="状态"></el-table-column>
                                <el-table-column width="70" property="jmh" label="竞买号"></el-table-column>
                                <el-table-column width="70" property="cj" label="出价"></el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane class="button" label="通知">
                            暂无消息
                            <table id="greetings"></table>
                        </el-tab-pane>
                    </el-tabs>
                    <!-- <el-table :data="bidderData">
                        <el-table-column width="70" property="zt" label="状态"></el-table-column>
                        <el-table-column width="70" property="jmh" label="竞买号"></el-table-column>
                        <el-table-column width="70" property="cj" label="出价"></el-table-column>
                    </el-table> -->
                    <el-popover
                    placement="right"
                    width="200"
                    trigger="click">
                        <el-table :data="netWorkBidderData">
                            <el-table-column width="70" property="name" label="姓名"></el-table-column>
                            <el-table-column width="120" property="phone" label="联系方式"></el-table-column>
                        </el-table>
                        <el-button class="sideBtn" slot="reference">
                            <!-- 网络竞买人列表1人报名 -->
                            <div>网</div>
                            <div>络</div>
                            <div>竞</div>
                            <div>买</div>
                            <div>人</div>
                            <div>列</div>
                            <div>表</div>
                            <div>1</div>
                            <div>人</div>
                            <div>报</div>
                            <div>名</div>
                        </el-button>
                    </el-popover>
                </div>
                </div>
            <div class="rightBottom">
                <div style="margin: 4px;">输入区:</div>
                <el-input class="textArea2" type="textarea" :disabled="able" :autosize="{ minRows: 8, maxRows: 8}" id="name"></el-input>
                <div style="display: flex;">
                    <el-button type="primary" class="button">常用语</el-button>
                    <div style="flex: 1;"></div>
                    <el-button type="danger" class="button" id="send">发送</el-button>
                </div>
            </div>
        </div>
        
        <div class="main"  v-for="(item, index) in this.data" :key="index" style="margin: 0 0 50px 0;">
            <div class="line1">
                <div class="top">
                    <h3>{{ item.bdmc }}</h3>
                    <div style="flex: 1;"></div>
                    <div v-if=" item.cpzt  == true">
                        <!-- <div style="background: #999; line-height: 36px; text-align: center;">本拍品已撤拍</div> -->
                        <el-button class="button" type="success" @click="renew( item.bdbh )">恢复拍卖</el-button>
                    </div>
                    <div v-else>
                        <el-button class="button" type="danger" @click="retreat( item.bdbh )">撤拍</el-button>
                    </div>
                    
                </div>
                

                <div class="imgLarge">
                    <el-image class="imgL" :src= 'item.sctp' alt="加载失败"></el-image>

                    <div class="state" v-if="item.pmzt == '未开拍'">即将开始</div>
                    <div class="state" v-else-if="item.pmzt == '拍卖中'">正在拍卖</div>
                    <div class="state" v-else>拍卖结束</div>

                </div>
                <div class="imgSmall">
                    <el-image class="imgS" :src="item.sctp" alt="加载失败"></el-image>
                </div>
                <div class="char">
                    <div>保证金:{{ item.bzj }}元</div>
                    <div>优先购买权人:</div>
                    <div>报名人数:</div>
                </div>
            </div>
            <div class="line2">
                <div class="auction">
                    <div class="row">
                        <div>起拍价:{{item.qpj}}元</div>
                    </div>
                    <div class="row">
                        <div style="color: #f00">距离开始:
                            <el-statistic ref="time1" :value="kpTime" format="DD天 HH小时:mm分:ss秒" time-indices>
                            </el-statistic>
                        </div>
                    </div>
                    <div class="row">
                        <span>起拍价(元):</span>
                        <el-input class="input" v-model=" item.qpj " disabled></el-input>
                    </div>
                    <div class="row">
                        <span>保留价(元):</span>
                        <el-input class="input" v-model=" item.blj " disabled></el-input>
                    </div>
                    <div class="row">
                        <!-- <span>自由竞价时间:</span> -->
                        <el-statistic v-if="!isStop && !isYstime" ref="time2" :value="xsTime" format="HH小时:mm分:ss秒" time-indices title="限时竞价时间" @finish="startYsTime(item)">
                        </el-statistic>
                        <div v-else>
                            <div style="text-align: center;">限时竞价时间</div>
                            <div v-if="falseXsTime == 0" style="text-align: center; font-size: 20px;">00小时:00分:00秒</div>
                            <div v-else style="text-align: center; font-size: 20px;">{{ falseXsTime }}</div>
                        </div>
                        <!-- @finish="startYsTime(item)" -->
                        <!-- <el-input class="timeInput"></el-input>
                        <span>天</span>
                        <el-input class="timeInput"></el-input>
                        <span>时</span>
                        <el-input class="timeInput"></el-input>
                        <span>分</span>
                        <el-input class="timeInput"></el-input>
                        <span>秒</span> -->
                    </div>
                    <div class="row">
                        <!-- <span>限时竞价时间:</span> -->
                        <el-statistic v-if="!isStop && isYstime" ref="time3" :value="ysTime" format="HH小时:mm分:ss秒" time-indices title="延时竞价时间" @finish="finishYsTime(item)">
                        </el-statistic>
                        <div v-else>
                            <div style="text-align: center;">延时竞价时间</div>
                            <div v-if="falseYsTime == 0" style="text-align: center; font-size: 20px;">00小时:00分:00秒</div>
                            <div v-else style="text-align: center; font-size: 20px;">{{ falseYsTime }}</div>
                        </div>
                        <!-- <el-input class="timeInput"></el-input>
                        <span>天</span>
                        <el-input class="timeInput"></el-input>
                        <span>时</span>
                        <el-input class="timeInput"></el-input>
                        <span>分</span>
                        <el-input class="timeInput"></el-input>
                        <span>秒</span> -->
                    </div>
                    <div class="row">
                        <span>加价幅度(元):</span>
                        <el-input class="input" v-model="range" :disabled="able"></el-input>
                        <el-button class="button submit" type="primary" @click="rangeChange(item.bdbh, range)">修改</el-button>
                    </div>
                    <div class="row">
                        <el-button class="button submit" type="danger" @click="start(item)" v-if="item.pmzt == '未开拍' && item.cpzt == false">开始竞拍</el-button>
                        <div v-else-if="item.pmzt == '拍卖中' && item.cpzt == false">
                            <div v-if="finishYs == false">
                                <span v-if="isYstime == true" >
                                    <el-button v-if="!isStop" class="button submit" type="success" @click="stop">暂停</el-button>
                                    <el-button v-else class="button submit" type="success" @click="goOn">继续</el-button>
                                </span>
                                
                                <el-button class="button submit" type="info" @click="goBack(item.bdbh)">回退</el-button>
                            </div>
                            <div v-if="isYstime == true && finishYs == true">
                                <el-button class="button submit" type="danger" @click="deal(item.bdbh)">确认成交</el-button>
                                <el-button class="button submit" type="danger" @click="unsold(item.bdbh)">确认流拍</el-button>
                            </div>
                            
                        </div>
                        
                    </div>
                </div>
            </div>
            <div class="line3">
                <div class="auction">
                    <div class="row">
                        <div style="display: flex;">
                            <div>当前价:{{ priceNow }}元</div>
                            <div style="flex: 1;"></div>
                            <div style="margin-right: 10px">出价人:{{ jmhNow }}</div>
                        </div>
                    </div>
                    <!-- <div class="row">
                        <div style="color: #f00">距离结束:01天20小时20分20秒</div>
                    </div> -->
                    <div class="row">
                        <span>现场出价号码:</span>
                        <el-input class="input" v-model="jmh" :disabled="able"></el-input>
                    </div>
                    <div class="row">
                        <span>优先竞买权人:</span>
                        <el-input class="input" :disabled="able">
                            <!-- <el-option label="test" :disabled="able"></el-option> -->
                        </el-input>
                    </div>
                    <div class="row">
                        <span>出价:</span>
                        <el-button class="button" icon="el-icon-minus" type="danger" size="small" style="margin-left: 10%" @click="minus"></el-button>
                        <el-input class="input" v-model="price" :disabled="able"></el-input>
                        <el-button class="button" icon="el-icon-plus" type="danger" size="small" @click="plus"></el-button>
                    </div>
                    <div class="row">
                        <el-button class="input " type="danger" style="line-height: 36px; margin-left: 27%; margin-top: 1%;" @click="offer(item.bdbh,jmh,price)">出价</el-button>
                    </div>
                    <div class="row" style="display: flex;">
                        <div>快速出价</div>
                        <div style="flex: 1;"></div>
                        <!-- <div style="margin-right: 6px" @click="changeRange()">修改幅度</div> -->
                    </div>
                    <div class="row">
                        <el-button class="priceUp" type="danger" @click="double">2倍加价幅度出价</el-button>
                        <el-button class="priceUp" type="danger" @click="triple">3倍加价幅度出价</el-button>
                    </div>
                    <div class="row">
                        <el-button class="priceUp" type="danger" @click="fourTimes">4倍加价幅度出价</el-button>
                        <el-button class="priceUp" type="danger" @click="fiveTimes">5倍加价幅度出价</el-button>
                    </div>
                </div>
            </div>
        </div>

        <Change v-if="isShowChangeDialog" :isShowChangeDialog="isShowChangeDialog"  @dialogClose="dialogClose"></Change>
    </div>
    </div>
  </template>


  <script>
  import Change from './changeRange.vue';
  import {getLot,cp,hfcp,begin,updJjfd,back,cj,bdSuccess,bdFailure,record,startTime,stopTime,continueTime,resetTime,deleteTime,getTime} from '@/api/auctioneerBackstage/auctioneerBackstage';
  import { editData } from '@/api/auctionManage/objectManage';
  export default {
    components:{
        Change
    },
      data(){
          return{
              imgSrc: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
              imgList: [
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
              'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
              'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'
              ],
              netWorkBidderData:[
                {
                    name: '赵四',
                    phone: '13366667777'
                },
                {
                    name: '赵四五',
                    phone: '13366667777'
                }
              ],
              bidderData:[
                {
                    state: '成功',
                    number: 2,
                    price: 10000
                }
              ],
              isShowChangeDialog: false,
              data: [],
              zyTime: 0,
              xsTime: 0,
              falseXsTime: 0,
              ysTime: 0,
              falseYsTime: 0,
              able: false,
              range: 0,
              jmh: '',
              price: 0,
              timer: '',
              priceNow: '',
              jmhNow: '',
              kpTime: '',
              timeId: '',
              isYstime: false,
              isStop: false,
              priceMax: 0,
              finishYs: false,
              startYs: false,
          }
      },
      props: {
        query: {
            type: String
        },
        kpsj: {
            type: String
        }
      },
      methods:{
        // keyDown(){
        //     document.onkeydown = () =>
        //     {
        //         console.log('刷新');
        //         if (event.keyCode == 116) {
        //             event.keyCode = 0;
        //             event.cancelBubble = true;
        //             return false;
        //         }
        //     }
        // },
        formatTime(time){
            var dateee = new Date(time).toJSON();
            return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
        },
        stop(){
            // this.xsTime = 0;
            this.isStop = true;
            // console.log('timeId',this.timeId);
            stopTime(this.query).then((res) => {
                if(res){
                    console.log(res.data);
                    if(this.isYstime == false){
                        this.falseXsTime = this.secTotime(res.data);
                    }
                    else{
                        this.falseYsTime = this.secTotime(res.data);
                    }
                    // this.xsTime = res.data * 1000;
                }
            });
        },
        goOn(){
            this.isStop = false;
            // console.log('timeId',this.timeId);
            continueTime(this.query).then((res) => {
                if(res){
                    console.log(res.data);
                    
                    if(this.isYstime == false){
                        this.xsTime = res.data * 1000 + Date.now();
                    }
                    else{
                        this.ysTime = res.data * 1000 + Date.now();
                    }
                }
            })
        },
        whichImg(item){
            this.imgSrc = item;
        },
        changeRange(){
            this.isShowChangeDialog = true;
        },
        dialogClose() {
            this.isShowChangeDialog = false;
        },
        getLotInfo(){
            getLot(this.query).then((res) => {
                if(res){
                    this.data = res.data;
                    console.log('data',this.data);
                    // this.getTimer();
                    // this.ysTime = 0;
                    // this.computedTime(this.data);
                }
            })
        },
        startYsTime(bd){
            // console.log('isYstime',this.isYstime);
            if(bd.pmzt == '拍卖中'){
                if(this.isYstime == false){
                    // this.finishYs = false;
                    // console.log('finishYs',this.finishYs);
                    console.log('延时竞价开始');
                    deleteTime(this.query).then((res) => {
                        this.isYstime = true;
                        let data = 'pmhbh=' + this.query + '&temtime=' + bd.ysjjsj + '&select=' + this.isYstime;
                        startTime(data).then((res2) => {
                            if(res2){
                                // console.log('res2',res2);
                                this.xsTime = 0;
                                this.falseXsTime = 0;
                                // this.timeId = res.data.计时器下标; 
                                this.ysTime = res2.data * 1000 + Date.now();
                                setTimeout(() => {
                                    console.log('!!!');
                                    this.startYs = true;
                                }, res2.data*1000);
                                // console.log('ysTime',res2.data);
                            }
                        });
                        // this.getTimer();
                        // console.log('finishYs',this.finishYs);
                        // this.finishYs = false;
                        console.log('finishYs',this.finishYs);
                    });
                    console.log(this.formatTime(new Date()));
                    let data3 = bd;
                    data3.yskpsj = this.formatTime(new Date());
                    data3.czsj = this.formatTime(bd.czsj);
                    editData(data3).then((res3) => {
                        if(res3){
                            console.log('延时竞价时间',res3.data);
                        }
                    });
                }
            }
        },
        finishYsTime(bd){
            // console.log('isYstime',this.isYstime);
            if(this.isYstime == true && this.startYs == true){
                this.finishYs = true;
                this.startYs == false;
                this.getLotInfo();
                console.log(this.formatTime(new Date()));
                let data3 = bd;
                data3.jssj = this.formatTime(new Date());
                data3.czsj = this.formatTime(bd.czsj);
                editData(data3).then((res3) => {
                    if(res3){
                        console.log('结束时间',res3.data);
                    }
                });
            }
        },
        secTotime(s) {
            var t = '';
            if(s > -1){
                var hour = Math.floor(s/3600);
                var min = Math.floor(s/60) % 60;
                var sec = s % 60;
                if(hour < 10){
                    t = '0'+ hour + "小时:";
                } 
                else{ 
                    t = hour + "小时:";
                } 
                if(min < 10){
                    t += "0";
                } 
                t += min + "分:";
                if(sec < 10){
                    t += "0";
                } 
                t += sec.toFixed(0);
                t += '秒';
            } 
            return t;
        },
        getRecord(bdbh){
            record(bdbh).then((res2) => {
                if(res2){
                    // console.log('res2',res2);
                    this.bidderData = res2.data;
                    for(let item of res2.data){
                        // item.cj = parseFloat(item.cj);
                        // console.log('出价',item.cj);
                        if(item.cj > this.priceMax){
                            this.priceMax = item.cj;
                        }
                    }
                    // console.log('最高价',this.priceMax);
                }
            });
        },
        start(bd){
            console.log('bd',bd);
            console.log('计时器开始');
            this.isYstime = false;
            this.able = false;
            let bdbh = bd.bdbh;
            begin(bdbh).then((res) => {
                if(res){
                    // console.log('res',res);
                    // this.computedXsTime(bd.xsjjsj);
                    this.getRecord(bdbh);
                    let data = 'pmhbh=' + this.query + '&temtime=' + bd.xsjjsj + '&select=' + this.isYstime;
                    // console.log('isYstime',this.isYstime);
                    startTime(data).then((res2) => {
                        if(res2){
                            console.log('xsTime',res2.data);
                            if(res2.data == '计时器已经存在，已经帮您注销，请再次点击'){
                                return ;
                            }
                            else{
                                this.timeId = res.data.计时器下标;
                                this.xsTime = res2.data * 1000 + Date.now();
                                
                                this.ysTime = 0;
                                this.falseYsTime = 0;
                                // console.log('timeId',this.timeId);
                                // console.log('xsTime',this.xsTime);
                                // console.log('ysTime',this.ysTime);
                                this.getLotInfo();
                            }
                            
                        }
                    });
                }
            });
            console.log(this.formatTime(new Date()));
            let data3 = bd;
            data3.kpsj = this.formatTime(new Date());
            data3.czsj = this.formatTime(bd.czsj);
            editData(data3).then((res3) => {
                if(res3){
                    console.log('开拍时间',res3.data);
                }
            });
        },

        //撤拍
        retreat(bdbh){
            cp(bdbh).then((res) => {
                if(res){
                    // console.log('res',res);
                    this.able = true;
                    // record('test01').then((res2) => {
                    //     if(res2){
                    //         console.log('res',res2);
                    //         this.bidderData = res2.data;
                            deleteTime(this.query).then((res3) => {
                                if(res3){
                                    console.log('计时器清空');
                                    this.getLotInfo();
                                    this.xsTime = 0;
                                    this.ysTime = 0;
                                    this.falseXsTime = 0;
                                    this.falseYsTime = 0;
                                }
                            });
                            
                    //     }
                    // });
                    
                }
            })
        },
        renew(bdbh){
            
            hfcp(bdbh).then((res) => {
                if(res){
                    // console.log('res',res);
                    this.able = true;
                    
                    this.getLotInfo();
                    this.xsTime = 0;
                    this.ysTime = 0;
                    this.falseXsTime = 0;
                    this.falseYsTime = 0;
                }
            })
        },
        rangeChange(bdbh,range){
            let data = 'bdbh=' + bdbh + '&jjfd=' + parseInt(range);
            updJjfd(data).then((res) => {
                if(res){
                    // console.log('res',res);
                }
            })
        },
        //回退
        goBack(bdbh){
            back(bdbh).then((res) => {
                if(res){
                    // console.log('res',res);
                    record(bdbh).then((res2) => {
                        if(res2){
                            // console.log('res2',res2);
                            this.bidderData = res2.data;
                        }
                    })
                }
            })
        },
        offer(bdbh,jmh,price){
            // console.log('出价',price);
            // console.log('最高价',this.priceMax);
            if(price < this.priceMax){
                this.$message.warning('出价低于当前最高价！');
                return ;
            }
            else{
                let data = 'bdbh=' + bdbh + '&jmh=' + jmh + '&cj=' + price + '&index=' + this.timeId + '&select=' + this.isYstime;
                // console.log('isYstime',this.isYstime);
                cj(data).then((res) => {
                    if(res){
                        // console.log('res',res);
                        this.priceNow = this.price;
                        this.jmhNow = this.jmh;
                        record(bdbh).then((res2) => {
                            if(res2){
                                // console.log('res',res2);
                                this.bidderData = res2.data;
                            }
                        })
                        // this.getTimer();
                    }
                });
            }
        },
        deal(bdbh){
            this.$confirm('当前标的成交', '成交', {
                comfirmButtonText: '下一个标的',
            }).then(() => {
                bdSuccess(bdbh).then((res) => {
                    if(res){
                        this.finishYs = false;
                        // console.log('res',res);
                        this.$message.success('当前标的已成交');
                        this.getLotInfo();
                        // clearInterval(timer);
                    }
                })
            }); 
        },
        unsold(bdbh){
            this.$confirm('当前标的流拍', '流拍', {
                comfirmButtonText: '下一个标的',
            }).then(() => {
                bdFailure(bdbh).then((res) => {
                    if(res){
                        this.finishYs = false;
                        // console.log('res',res);
                        this.$message.warning('当前标的已流拍');
                        this.getLotInfo();
                        // clearInterval(timer);
                    }
                })
            }); 
        },
        double(){
            this.price += parseInt(this.range)*2;
        },
        triple(){
            this.price += parseInt(this.range)*3;
        },
        fourTimes(){
            this.price += parseInt(this.range)*4;
        },
        fiveTimes(){
            this.price += parseInt(this.range)*5;
        },
        plus(){
            this.price += parseInt(this.range);
        },
        minus(){
            this.price -= parseInt(this.range);
        },
        getTimer(){
            getTime(this.query).then((res) => {
                if(res){
                    console.log('获取当前时间',res.data);
                    if(res.data.select == false){
                        this.xsTime = res.data.time * 1000 + Date.now();
                        // console.log('xsTime',res.data.time);
                        this.isYstime = res.data.select;
                    }
                    else{
                        this.ysTime = res.data.time * 1000 + Date.now();
                        // console.log('ysTime',res.data.time);
                        this.isYstime = res.data.select;
                    }
                }
            })
        }
        

      },
  mounted(){
        // console.log('==================',this.query, this.kpsj);
        // console.log(new Date(this.kpsj).getTime());
        this.kpTime = new Date(this.kpsj).getTime();
        
        this.xsTime = 0;
        this.ysTime = 0;
        this.getLotInfo();
        this.getTimer();
        // console.log('isYstime',this.isYstime);
        console.log('mounted');
        // this.keyDown();
      },
  }
  </script>
  
  <style lang="less" scoped>
      *{
          margin: 0;
          padding: 0;
      }
      .right{
          background: #fff; 
          width: 19%; 
          height: 100%; 
          float: right;
      }
      .right .rightTop .bar{
          display: flex;
          justify-content: space-between;
          margin: 4px;
      }
      .right .rightTop .bar span{
          color: rgb(220, 220, 220);
      }
      .right .rightTop .textArea1{
          width: 100%; 
          border: 1px solid rgb(220, 220, 220); 
          /* height: 300px; */
          margin: 0 auto;
          position: relative;
      }
      .right .rightTop .textArea1 .sideBtn{
        background-color: #f00; 
        color: #fff; 
        padding: 4px; 
        position: absolute; 
        top: 11%; 
        right: 100%;
      }
      .right .rightBottom .textArea2{
          width: 90%; 
          margin: 0 auto;
      }
      .right .rightBottom .button{
          padding: 4px;
          margin: 8px;
      }
  
      .main{
          background: #fff;
          width: 80%;
          display: flex;
          padding: 14px;
      }
      .main .line1{
          margin-left: 1%;
          margin-right: 1%;
          width: 28%;
          height: 100%;
          background: #fff;
      }

      .main .line1 .top{
        display: flex;
      }

      .main .line1 .top .button{
        width: 100%;
        height: 36px;
        margin: 1% 0;
        padding: 10px;
      }

      .main .line1 .imgLarge{
          margin: 10px 0;
          width: 84%;
      }
      .main .line1 .imgLarge .imgL{
          width: 96%; 
          height: 140px; 
          border-radius: 10px;
      }
      .main .line1 .imgLarge .state{
          text-align: center;
          margin-top: -4px;
          background: #f00;
          color: #fff;
          width: 96%;
          border: 1px solid #999;
      }
      .main .line1 .imgSmall{
          margin: 20px 0;
          width: 84%;
          display: flex;
      }
      .main .line1 .imgSmall .imgS{
          width: 36%; 
          height: 60px; 
          border-radius: 10px;
      }
      .main .line1 .char{
          font-size: 14px;
      }
      .main .line2{
          width: 32%;
          height: 100%;
          background: #fff;
          font-size: 14px;
      }
      .main .line2 .auction{
          background: rgb(240, 240, 240);
          padding: 10px;
          border-radius: 10px;
      }
      .main .line2 .auction .row{
          margin: 4px 0;
      }
      .main .line2 .auction .row .input{
          width: 40%;
          margin-left: 4px;
      }
      .main .line2 .auction .row .timeInput{
          width: 10%;
          margin: 0 4px 0 4px;
      }
      .main .line2 .auction .row .button{
          padding: 4px;
          margin-left: 10px;
      }
      .main .line2 .auction .row .submit{
          padding: 8px;
          /* margin: 3% 38%; */
      }
      .main .line3{
          width: 35%;
          margin-left: 1%;
          height: 100%;
          background: #fff;
          font-size: 14px;
      }
      .main .line3 .char{
          margin: 10px 0;
      }
      .main .line3 .auction{
          background: rgb(240, 240, 240);
          padding: 10px;
          border-radius: 10px;
      }
      .main .line3 .auction .row{
          margin: 4px 0;
      }
      .main .line3 .auction .row .input{
          width: 40%;
          margin-left: 4px;
      }
      .main .line3 .auction .row .button{
          padding: 2px;
          margin: 4px;
      }
      .main .line3 .auction .row .priceUp{
          line-height: 24px;
          margin: 2px 4px;
      }
    //   .main .line4{
    //       width: 10%;
    //       margin: 0 1%;
    //       height: 100%;
    //       background: #fff;
    //   }
    //   .main .line4 .button{
    //       width: 100%;
    //       height: 36px;
    //       margin: 1% 0;
    //   }
  </style>